<template>
  <div class="student-layout">
    <!-- 顶部导航栏 -->
    <header class="student-header">
      <div class="header-left">
        <div class="logo">
          <i class="fas fa-graduation-cap"></i>
          <h1>智慧考试系统</h1>
        </div>
        
        <!-- 主导航 -->
        <nav class="main-nav hidden-mobile">
          <router-link to="/student/dashboard" class="nav-item">
            <i class="fas fa-tachometer-alt"></i>
            仪表板
          </router-link>
          <router-link to="/student/exams" class="nav-item">
            <i class="fas fa-file-alt"></i>
            考试列表
          </router-link>
          <router-link to="/student/records" class="nav-item">
            <i class="fas fa-history"></i>
            考试记录
          </router-link>
        </nav>
      </div>
      
      <div class="header-right">
        <!-- 搜索框 -->
        <div class="search-box hidden-mobile">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索考试、成绩..."
            :prefix-icon="Search"
            @keyup.enter="handleSearch"
          />
        </div>
        
        <!-- 通知 -->
        <el-badge :value="notificationCount" class="notification-badge">
          <el-button circle :icon="Bell" @click="showNotifications" />
        </el-badge>
        
        <!-- 用户菜单 -->
        <el-dropdown @command="handleUserCommand">
          <div class="user-info">
            <el-avatar :src="userStore.userInfo?.avatar" :size="32">
              {{ userStore.userInfo?.name?.charAt(0) }}
            </el-avatar>
            <span class="username hidden-mobile">{{ userStore.userInfo?.name }}</span>
            <i class="fas fa-chevron-down"></i>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="profile">
                <i class="fas fa-user"></i>
                个人资料
              </el-dropdown-item>
              <el-dropdown-item command="history">
                <i class="fas fa-history"></i>
                考试记录
              </el-dropdown-item>
              <el-dropdown-item divided command="logout">
                <i class="fas fa-sign-out-alt"></i>
                退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        
        <!-- 移动端菜单按钮 -->
        <el-button 
          class="mobile-menu-btn hidden-desktop"
          :icon="Menu"
          @click="toggleMobileMenu"
        />
      </div>
    </header>
    
    <!-- 移动端导航菜单 -->
    <div v-show="showMobileMenu" class="mobile-nav hidden-desktop">
      <router-link to="/student/dashboard" class="mobile-nav-item" @click="closeMobileMenu">
        <i class="fas fa-tachometer-alt"></i>
        仪表板
      </router-link>
      <router-link to="/student/exams" class="mobile-nav-item" @click="closeMobileMenu">
        <i class="fas fa-file-alt"></i>
        考试列表
      </router-link>
      <router-link to="/student/records" class="mobile-nav-item" @click="closeMobileMenu">
        <i class="fas fa-history"></i>
        考试记录
      </router-link>
    </div>
    
    <!-- 主内容区 -->
    <main class="student-main">
      <router-view />
    </main>
    
    <!-- 通知抽屉 -->
    <el-drawer
      v-model="notificationDrawer"
      title="通知中心"
      direction="rtl"
      size="400px"
    >
      <div class="notification-list">
        <div v-for="notification in notifications" :key="notification.id" class="notification-item">
          <div class="notification-icon">
            <i :class="notification.icon"></i>
          </div>
          <div class="notification-content">
            <h4>{{ notification.title }}</h4>
            <p>{{ notification.content }}</p>
            <span class="notification-time">{{ notification.time }}</span>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Bell, Menu } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

const searchKeyword = ref('')
const showMobileMenu = ref(false)
const notificationDrawer = ref(false)

const notificationCount = computed(() => {
  return notifications.value.filter(n => !n.read).length
})

const notifications = ref([
  {
    id: 1,
    title: '考试提醒',
    content: '《数据结构》考试将于明天上午9:00开始',
    time: '30分钟前',
    icon: 'fas fa-clock',
    read: false
  },
  {
    id: 2,
    title: '成绩发布',
    content: '《计算机网络》考试成绩已发布',
    time: '2小时前',
    icon: 'fas fa-chart-line',
    read: false
  },
  {
    id: 3,
    title: '系统通知',
    content: '考试系统将于今晚进行维护升级',
    time: '1天前',
    icon: 'fas fa-info-circle',
    read: true
  }
])

const handleSearch = () => {
  if (searchKeyword.value.trim()) {
    // 执行搜索逻辑
    console.log('搜索:', searchKeyword.value)
  }
}

const showNotifications = () => {
  notificationDrawer.value = true
}

const toggleMobileMenu = () => {
  showMobileMenu.value = !showMobileMenu.value
}

const closeMobileMenu = () => {
  showMobileMenu.value = false
}

const handleUserCommand = async (command) => {
  switch (command) {
    case 'profile':
      router.push('/student/profile')
      break
    case 'history':
      router.push('/student/records')
      break
    case 'logout':
      try {
        await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        await userStore.logoutAction()
        ElMessage.success('退出登录成功')
        router.push('/login')
      } catch (error) {
        // 用户取消
      }
      break
  }
}
</script>

<style lang="scss" scoped>
.student-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.student-header {
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 32px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  
  i {
    font-size: 28px;
    color: var(--primary-color);
  }
  
  h1 {
    font-size: 20px;
    font-weight: 700;
    color: var(--neutral-700);
    
    @media (max-width: 768px) {
      display: none;
    }
  }
}

.main-nav {
  display: flex;
  gap: 8px;
  
  .nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--neutral-500);
    font-weight: 500;
    transition: all 0.3s ease;
    
    i {
      font-size: 16px;
    }
    
    &:hover {
      color: var(--primary-color);
      background: rgba(22, 93, 255, 0.1);
    }
    
    &.router-link-active {
      color: var(--primary-color);
      background: rgba(22, 93, 255, 0.1);
    }
  }
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.search-box {
  width: 300px;
  
  :deep(.el-input__wrapper) {
    border-radius: 20px;
  }
}

.notification-badge {
  :deep(.el-badge__content) {
    border: 2px solid white;
  }
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
  
  &:hover {
    background: var(--neutral-100);
  }
  
  .username {
    font-weight: 500;
    color: var(--neutral-700);
  }
  
  i {
    font-size: 12px;
    color: var(--neutral-400);
  }
}

.mobile-menu-btn {
  :deep(.el-button) {
    border: none;
  }
}

.mobile-nav {
  background: white;
  border-top: 1px solid var(--neutral-200);
  padding: 16px;
  
  .mobile-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--neutral-500);
    font-weight: 500;
    margin-bottom: 8px;
    transition: all 0.3s ease;
    
    i {
      font-size: 16px;
      width: 20px;
    }
    
    &:hover {
      color: var(--primary-color);
      background: rgba(22, 93, 255, 0.1);
    }
    
    &.router-link-active {
      color: var(--primary-color);
      background: rgba(22, 93, 255, 0.1);
    }
  }
}

.student-main {
  flex: 1;
  padding: 24px;
  background: var(--neutral-100);
  overflow-y: auto;
}

.notification-list {
  .notification-item {
    display: flex;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--neutral-200);
    
    &:last-child {
      border-bottom: none;
    }
    
    .notification-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(22, 93, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      
      i {
        color: var(--primary-color);
      }
    }
    
    .notification-content {
      flex: 1;
      
      h4 {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 4px;
        color: var(--neutral-700);
      }
      
      p {
        font-size: 13px;
        color: var(--neutral-500);
        margin-bottom: 8px;
        line-height: 1.4;
      }
      
      .notification-time {
        font-size: 12px;
        color: var(--neutral-400);
      }
    }
  }
}

@media (max-width: 768px) {
  .hidden-mobile {
    display: none !important;
  }
  
  .student-main {
    padding: 16px;
  }
}

@media (min-width: 769px) {
  .hidden-desktop {
    display: none !important;
  }
}
</style>